Vue.component("tabs", {
    template:
        '<div class="tabs">\
                <div class="tabs-bar">\
                    <div :class="tabCls(item)" v-for="(item,index) in navList" @click="handleChange(index)">{{item.label}}</div>\
                </div>\
                <div class="tabs-content">\
                    <slot></slot>\
                </div>\
            </div>',
    props: {
        value: {
            type: [String, Number],
        },
    },
    data: function () {
        return {
            currentValue: this.value,
            navList: [],
        };
    },
    methods: {
        tabCls: function (item) {
            return [
                "tabs-tab",
                {
                    "tabs-tab-active": item.name === this.currentValue,
                },
            ];
        },
        getTabs: function () {
            return this.$children.filter(function (item) {
                return item.$options.name === "pane";
            });
        },
        updateNav: function () {
            this.navList = [];
            var _this = this;

            this.getTabs().forEach(function (pane, index) {
                if (!pane.name) pane.name = index;
                _this.navList.push({
                    label: pane.label,
                    name: pane.name,
                });
                if (index === 0) {
                    if (!_this.currentValue) {
                        _this.currentValue = pane.name;
                    }
                }
            });

            this.updateStatus();
        },
        updateStatus: function () {
            var tabs = this.getTabs();
            var _this = this;

            tabs.forEach(function (tab) {
                tab.show = tab.name === _this.currentValue;
            });
        },
        handleChange: function (index) {
            var nav = this.navList[index];
            var name = nav.name;
            this.currentValue = name;
            this.$emit("input", name);
            this.$emit("on-click", name);
        },
    },
    watch: {
        value: function (val) {
            this.currentValue = val;
        },
        currentValue: function () {
            this.updateStatus();
        },
    },
});
